<template>
  <div class="container">
    <Divider>选择模板</Divider>


    <div>
      <RadioGroup v-model="template" @on-change="templateChange">
        <Radio label="1" border>学士学位证明</Radio>
        <Radio label="2" border>学历证明</Radio>
        <Radio label="3" border>被查学生信息表</Radio>
        <Radio label="4" border>测试模版</Radio>
        <Radio label="5" border>2019年报模板</Radio>
        <Radio label="6" border>1学历证明</Radio>
        <Radio label="7" border>2学历证明</Radio>
        <Radio label="8" border>3学历证明</Radio>
      </RadioGroup>

      <Button type="info">上传</Button>
      <Button type="info" icon="md-sync" style="margin: 0 20px;">重置</Button>
      <Button type="info" @click="setMarginsVisible = true">设置边距</Button>


    </div>

    <Divider>在线编辑</Divider>
    <div style="display: flex;">
      <div style="width: 50%;height: 100%;">
        <Divider>在线编辑</Divider>
        <vue-ueditor-wrap v-model="ueditorData" :config="ueditorConfig"></vue-ueditor-wrap>
      </div>
      <div style="width: 50%;height: 100%;">
        <Divider>预览</Divider>
        <div
          :style="`padding: ${padding.top}mm ${padding.right}mm ${padding.bottom}mm ${padding.left}mm;max-height: 80vh;overflow-y: auto;`"
          v-html="ueditorData"
        ></div>
      </div>
    </div>


    <Modal v-model="setMarginsVisible" draggable sticky scrollable :mask="false" title="设置边距">
      <Form ref="formCustom" :model="padding" :label-width="80">
        <FormItem label="上边距">
          <Input type="number" v-model="padding.top"></Input>
        </FormItem>

        <FormItem label="右边距">
          <Input type="number" v-model="padding.right"></Input>
        </FormItem>

        <FormItem label="下边距">
          <Input type="number" v-model="padding.bottom"></Input>
        </FormItem>

        <FormItem label="左边距">
          <Input type="number" v-model="padding.left"></Input>
        </FormItem>

      </Form>
    </Modal>

  </div>
</template>

<script>
import VueUeditorWrap from 'vue-ueditor-wrap'
import template from './template.js'

export default {
  // import 引入的组件需要注入到对象中才能使用
  components: {
    VueUeditorWrap
  },
  props: {},
  data() {
    // 这里存放数据
    return {
      setMarginsVisible: false,
      template: '',
      ueditorData: '',
      ueditorConfig: {
        // 设置编辑器不自动被内容撑高
        autoHeightEnabled: false,
        // 初始容器高度
        initialFrameHeight: 600,
        // 初始容器宽度
        initialFrameWidth: '100%',
        // 可以放后台存放路径--可在此填写，也可在config文件中配置
        // serverUrl: "",
        // UEditor 是文件的存放路径，
        UEDITOR_HOME_URL: '/Ueditor/'
      },
      padding: {
        top: 30,
        right: 30,
        bottom: 30,
        left: 30
      }
    }
  },
  // 计算属性 类似于 data 概念
  computed: {},
  // 监控 data 中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this 实例）
  created() {
  },
  // 生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted() {
  },
  beforeCreate() {
  },
  beforeMount() {
  }, // 生命周期 - 挂载之前
  beforeUpdate() {
  }, // 生命周期 - 更新之前
  updated() {
  }, // 生命周期 - 更新之后
  beforeDestroy() {
  }, // 生命周期 - 销毁之前
  destroyed() {
  }, // 生命周期 - 销毁完成
  activated() {
  },
  // 方法集合
  methods: {
    templateChange(e) {
      console.log(e)
      this.ueditorData = template[`template${e}`]
      console.log(template[`template${e}`])
    }
  } // 如果页面有 keep-alive 缓存功能,这个函数会触发
}
</script>

<style scoped lang="scss">
.container {
  height: 100%;
}
</style>

